<template>
  <div class="container">
    <div class="scroll-progress" ref="scrollProgress"></div>
    
    <section class="hero-section">
      <div class="hero-content">
        <div class="text-content">
          <h1 class="main-title animate"> 让每一次交流都有意义</h1>
          <p class="subtitle animate">AI驱动的深度对话分析，发掘沟通价值，优化交流效果</p>
          <div class="cta-buttons animate">
            <button class="btn-primary" @click="router.push('/analysis')">开始分析</button>
            <button class="btn-secondary" @click="showDemo">查看演示</button>
          </div>
        </div>
        <div class="visual-content">
          <div class="chart-container" ref="chartContainerRef">
            <div v-for="(chart, index) in charts" 
                 :key="index" 
                 :class="['chart', { active: activeChart === index }]"
                 :title="chart.name"
                 :id="`chart-${index}`">
            </div>
            <div v-if="isLoading" class="chart-loading">
              <div class="loading-spinner"></div>
              <p>加载中...</p>
            </div>
          </div>
        </div>
      </div>
      <div class="scroll-indicator" @click="scrollToFeatures">
        <div class="mouse">
          <div class="wheel"></div>
        </div>
        <div class="arrow">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
      <div class="wave-transition">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
          <path fill="#f5f7ff" fill-opacity="1" d="M0,160L48,176C96,192,192,224,288,224C384,224,480,192,576,165.3C672,139,768,117,864,128C960,139,1056,181,1152,186.7C1248,192,1344,160,1392,144L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
        </svg>
      </div>
    </section>

    <section class="features-section" ref="featuresRef" id="features">
      <h2 class="section-title" ref="featureTitle">核心功能</h2>
      <div class="features-grid">
        <div class="feature-card" v-for="(feature, index) in features" :key="index" ref="featureCards">
          <div class="feature-icon">
            <i :class="feature.icon"></i>
          </div>
          <h3 class="feature-title">{{ feature.title }}</h3>
          <p class="feature-description">{{ feature.description }}</p>
        </div>
      </div>
      <div class="wave-transition">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
          <path fill="#f0f4ff" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,117.3C672,107,768,117,864,138.7C960,160,1056,192,1152,186.7C1248,181,1344,139,1392,117.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
        </svg>
      </div>
    </section>

    <section class="workflow-section" ref="processRef" id="process">
      <h2 class="section-title" ref="processTitle">使用流程</h2>
      <div class="process-container">
        <div class="process-steps">
          <div class="process-step" v-for="(step, index) in steps" :key="index" ref="processSteps">
            <div class="step-number">{{ index + 1 }}</div>
            <div class="step-content">
              <h3 class="step-title">{{ step.title }}</h3>
              <p class="step-description">{{ step.description }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="wave-transition">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
          <path fill="#ffffff" fill-opacity="1" d="M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,202.7C672,203,768,181,864,181.3C960,181,1056,203,1152,208C1248,213,1344,203,1392,197.3L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
        </svg>
      </div>
    </section>

    <section class="cta-section">
      <div class="cta-content">
        <h2 class="section-title">立即体验对话智析</h2>
        <p>发掘对话价值，让每一次交流都有意义</p>
        <button class="btn-primary" @click="router.push('/analysis')">免费开始</button>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';
import { useRouter, onBeforeRouteLeave } from 'vue-router';
import * as echarts from 'echarts';
import { useAnalysisStore } from '../stores/analysis';
import type { TimelineData, NetworkNode } from '../stores/analysis';

const router = useRouter();
const analysisStore = useAnalysisStore();
const activeChart = ref(0);
let chartInterval: number | null = null;
let chartInstances: echarts.ECharts[] = [];
const isPageVisible = ref(true);
const isLoading = ref(false);
const chartContainerRef = ref<HTMLElement | null>(null);

// 用于动画的引用
const featuresRef = ref<HTMLElement | null>(null);
const processRef = ref<HTMLElement | null>(null);
const featureCards = ref<HTMLElement[]>([]);
const processSteps = ref<HTMLElement[]>([]);
const featureTitle = ref<HTMLElement | null>(null);
const processTitle = ref<HTMLElement | null>(null);
const scrollProgress = ref<HTMLElement | null>(null);

const features = [
  {
    icon: 'fas fa-chart-line',
    title: '情感洞察',
    description: '精准捕捉对话中的情绪变化，识别关键情感转折点'
  },
  {
    icon: 'fas fa-project-diagram',
    title: '关联网络',
    description: '可视化对话中的关键信息与目标之间的逻辑关联'
  },
  {
    icon: 'fas fa-chess',
    title: '意图解析',
    description: '深入分析对话参与者的潜在动机和策略目标'
  },
  {
    icon: 'fas fa-exclamation-triangle',
    title: '冲突预警',
    description: '及时识别沟通障碍，评估风险并提供解决方案'
  },
  {
    icon: 'fas fa-lightbulb',
    title: '优化建议',
    description: '提供个性化沟通策略，让每次交流更有效、更有意义'
  }
];

const steps = [
  {
    title: '导入对话',
    description: '上传对话文本或直接输入对话内容，简单便捷'
  },
  {
    title: '智能分析',
    description: 'AI引擎深度解析对话内容，挖掘交流价值'
  },
  {
    title: '查看洞察',
    description: '获取全面的对话分析报告和直观可视化结果'
  },
  {
    title: '提升交流',
    description: '应用智能建议，让每一次交流都更有意义'
  }
];

const charts = [
  {
    type: 'line',
    name: '情感时间轴'
  },
  {
    type: 'graph',
    name: '证据关联网络'
  },
  {
    type: 'radar',
    name: '对话维度分析'
  }
];

// 清除所有图表实例
const clearCharts = () => {
  if (chartInstances.length > 0) {
    console.log('Clearing chart instances...');
    chartInstances.forEach(chart => {
      try {
        chart.dispose();
      } catch (e) {
        console.error('Error disposing chart:', e);
      }
    });
    chartInstances = [];
  }
};

// 初始化图表
const initCharts = async () => {
  console.log('Initializing charts...');
  clearCharts();
  isLoading.value = true;

  try {
    await nextTick();
    
    // 确保容器存在
    if (!chartContainerRef.value) {
      console.error('Chart container not found');
      return;
    }

    // 等待 DOM 更新
    await new Promise(resolve => setTimeout(resolve, 100));

    for (let i = 0; i < charts.length; i++) {
      const chartElement = document.getElementById(`chart-${i}`);
      if (!chartElement) {
        console.error(`Chart element not found: chart-${i}`);
        continue;
      }

      // 创建图表实例
      try {
        const chart = echarts.init(chartElement);
        const option = getChartOption(charts[i].type);
        chart.setOption(option);
        chartInstances.push(chart);
      } catch (e) {
        console.error(`Error initializing chart ${i}:`, e);
      }
    }

    // 启动图表轮播
    startChartRotation();
  } catch (e) {
    console.error('Error in initCharts:', e);
  } finally {
    isLoading.value = false;
  }
};

// 获取图表配置
const getChartOption = (type: string) => {
  if (type === 'line') {
    // 使用store中的时间线数据
    const timelineData = analysisStore.getTimelineData;
    
    return {
      grid: { top: 20, right: 20, bottom: 20, left: 40 },
      xAxis: { 
        type: 'category', 
        data: timelineData.map((item: TimelineData) => item.time),
        show: false
      },
      yAxis: { type: 'value', show: false },
      series: [{
        data: timelineData.map((item: TimelineData) => item.value),
        type: 'line',
        smooth: true,
        symbolSize: 8,
        itemStyle: {
          color: '#2A5CFF'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(42, 92, 255, 0.3)'
            }, {
              offset: 1,
              color: 'rgba(42, 92, 255, 0)'
            }]
          }
        }
      }]
    };
  }
  
  if (type === 'graph') {
    // 使用store中的网络数据
    const networkData = analysisStore.getNetworkData;
    
    return {
      series: [{
        type: 'graph',
        layout: 'force',
        data: networkData.nodes.map((node: NetworkNode) => ({
          name: node.label,
          symbolSize: node.type === 'target' ? 50 : 30,
          category: node.type === 'target' ? 0 : node.type === 'evidence' ? 1 : 2
        })),
        links: networkData.links.map((link: {source: string, target: string}) => ({
          source: networkData.nodes.find((n: NetworkNode) => n.id === link.source)?.label || '',
          target: networkData.nodes.find((n: NetworkNode) => n.id === link.target)?.label || ''
        })),
        categories: [
          { name: '目标' },
          { name: '证据' },
          { name: '陈述' }
        ],
        roam: true,
        label: {
          show: true,
          position: 'right'
        },
        force: {
          repulsion: 100
        }
      }]
    };
  }
  
  // 雷达图
  const radarData = analysisStore.getRadarData;
  
  if (!radarData || !radarData.categories || !radarData.values || radarData.categories.length === 0) {
    return {
      radar: {
        indicator: [
          { name: '情感强度', max: 100 },
          { name: '话题相关性', max: 100 },
          { name: '互动频率', max: 100 },
          { name: '表达清晰度', max: 100 },
          { name: '回应速度', max: 100 }
        ]
      },
      series: [{
        name: '对话维度分析',
        type: 'radar',
        data: [{
          name: '当前对话',
          value: [0, 0, 0, 0, 0],
          itemStyle: {
            color: '#2A5CFF'
          },
          areaStyle: {
            color: 'rgba(42, 92, 255, 0.3)'
          }
        }]
      }]
    };
  }
  
  return {
    radar: {
      indicator: radarData.categories.map((category: string) => ({ name: category, max: 100 }))
    },
    series: [{
      name: '对话维度分析',
      type: 'radar',
      data: [{
        name: '当前对话',
        value: radarData.values.map((value: number) => value * 100),
        itemStyle: {
          color: '#2A5CFF'
        },
        areaStyle: {
          color: 'rgba(42, 92, 255, 0.3)'
        }
      }]
    }]
  };
};

// 启动图表轮播
const startChartRotation = () => {
  if (chartInterval) {
    clearInterval(chartInterval);
    chartInterval = null;
  }
  
  chartInterval = window.setInterval(() => {
    activeChart.value = (activeChart.value + 1) % charts.length;
  }, 5000);
};

// 停止图表轮播
const stopChartRotation = () => {
  if (chartInterval) {
    clearInterval(chartInterval);
    chartInterval = null;
  }
};

// 处理窗口大小变化
const handleResize = () => {
  if (chartInstances.length > 0) {
    console.log('Resizing charts...');
    chartInstances.forEach(chart => {
      try {
        chart.resize();
      } catch (e) {
        console.error('Error resizing chart:', e);
      }
    });
  }
};

// 处理页面可见性变化
const handleVisibilityChange = () => {
  if (document.hidden) {
    console.log('Page is now hidden');
    isPageVisible.value = false;
    stopChartRotation();
  } else {
    console.log('Page is now visible');
    isPageVisible.value = true;
    if (chartInstances.length === 0) {
      initCharts();
    }
    startChartRotation();
  }
};

// 监听页面可见性变化
const setupVisibilityListener = () => {
  document.addEventListener('visibilitychange', handleVisibilityChange);
};

// 移除页面可见性监听
const removeVisibilityListener = () => {
  document.removeEventListener('visibilitychange', handleVisibilityChange);
};

// 清理所有资源
const cleanupAll = () => {
  window.removeEventListener('scroll', handleScroll);
  window.removeEventListener('resize', handleResize);
  removeVisibilityListener();
  stopChartRotation();
  clearCharts();
};

// 初始化所有内容
const initializeAll = async () => {
  try {
    // 初始化动画
    await nextTick();
    initAnimations();
    
    // 设置滚动监听
    window.addEventListener('scroll', handleScroll);
    
    // 设置可见性监听
    setupVisibilityListener();
    
    // 设置 resize 监听
    window.addEventListener('resize', handleResize);
    
    // 加载分析数据
    await analysisStore.loadAnalysisData();
    
    // 初始化图表
    await initCharts();
  } catch (e) {
    console.error('Error in initializeAll:', e);
  }
};

// 生命周期钩子
onMounted(async () => {
  await initializeAll();
});

onBeforeRouteLeave(() => {
  cleanupAll();
});

// 显示演示
const showDemo = () => {
  router.push({
    path: '/analysis',
    query: { demo: 'true' }
  });
};

// 滚动到功能部分
const scrollToFeatures = () => {
  const featuresElement = document.getElementById('features');
  if (featuresElement) {
    featuresElement.scrollIntoView({ behavior: 'smooth' });
  }
};

// 初始化动画观察器
const initAnimations = () => {
  // 创建Intersection Observer实例
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 添加动画类
        entry.target.classList.add('animate');
        // 如果是特定的容器，为其子元素添加级联动画
        if (entry.target.classList.contains('features-grid') || 
            entry.target.classList.contains('process-steps')) {
          const children = Array.from(entry.target.children);
          children.forEach((child, index) => {
            setTimeout(() => {
              (child as HTMLElement).classList.add('animate');
            }, index * 150); // 每个子元素延迟150ms
          });
        }
        // 观察到后取消观察
        observer.unobserve(entry.target);
      }
    });
  }, {
    threshold: 0.1, // 当10%的元素可见时触发
    rootMargin: '0px 0px -100px 0px' // 提前100px触发
  });

  // 观察主要部分
  if (featuresRef.value) observer.observe(featuresRef.value);
  if (processRef.value) observer.observe(processRef.value);
  if (featureTitle.value) observer.observe(featureTitle.value);
  if (processTitle.value) observer.observe(processTitle.value);
  
  // 观察各个卡片和步骤
  featureCards.value.forEach(card => observer.observe(card));
  processSteps.value.forEach(step => observer.observe(step));
  
  // 添加滚动监听器，用于视差效果
  window.addEventListener('scroll', handleScroll);
  
  return () => {
    observer.disconnect();
    window.removeEventListener('scroll', handleScroll);
  };
};

// 处理滚动事件，创建视差效果
const handleScroll = () => {
  const scrollPosition = window.scrollY;
  
  // 为不同部分添加视差效果
  if (featuresRef.value) {
    const offset = scrollPosition * 0.1;
    featuresRef.value.style.backgroundPositionY = `-${offset}px`;
  }
  
  if (processRef.value) {
    const offset = scrollPosition * 0.05;
    processRef.value.style.backgroundPositionY = `-${offset}px`;
  }
  
  // 更新滚动进度条
  if (scrollProgress.value) {
    const scrollHeight = document.body.scrollHeight;
    const clientHeight = window.innerHeight;
    const progress = (scrollPosition / (scrollHeight - clientHeight)) * 100;
    scrollProgress.value.style.width = `${progress}%`;
  }
};
</script>

<style scoped>
.container {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  background: linear-gradient(180deg, var(--color-bg) 0%, rgba(245, 247, 255, 1) 100%);
}

.hero-section {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  overflow: hidden;
  padding: 0;
  margin-bottom: 0;
}

.hero-content {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  position: relative;
}

.text-content {
  flex: 0 0 45%;
  padding-right: 2rem;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-self: flex-end;
  margin-bottom: 15%;
}

.main-title {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 1.5rem;
  line-height: 1.2;
  position: relative;
  display: inline-block;
}

.main-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 80px;
  height: 4px;
  background-color: var(--color-primary);
  border-radius: 2px;
}

.subtitle {
  font-size: 1.5rem;
  color: var(--color-text-light);
  margin-bottom: 2rem;
  line-height: 1.5;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.btn-primary, .btn-secondary {
  padding: 0.8rem 1.8rem;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: var(--color-primary);
  color: white;
  border: none;
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-text-dark);
  border: 2px solid var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark, #3050e0);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover {
  background-color: rgba(65, 105, 225, 0.1);
  transform: translateY(-3px);
}

.visual-content {
  flex: 0 0 55%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.chart-container {
  width: 100%;
  height: 70%;
  background-color: transparent;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.chart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 2;
}

.chart.active {
  opacity: 1;
}

.chart-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 3;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(65, 105, 225, 0.2);
  border-radius: 50%;
  border-top-color: var(--color-primary);
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.features-section {
  padding: 6rem 0 8rem;
  text-align: center;
  position: relative;
  background-color: #f5f7ff;
  z-index: 2;
}

.features-section::before {
  display: none;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.feature-card {
  background-color: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--card-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  background-color: #f9f9ff;
}

.feature-icon {
  font-size: 2.5rem;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.feature-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--color-text-dark);
}

.feature-description {
  color: var(--color-text-light);
  line-height: 1.6;
}

.workflow-section {
  padding: 6rem 0 8rem;
  position: relative;
  background-color: #f0f4ff;
  margin-top: 0;
  z-index: 1;
  text-align: center;
}

.workflow-section::before {
  display: none;
}

.process-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.process-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 3rem;
}

.process-step {
  flex: 1;
  min-width: 250px;
  max-width: 350px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-number {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

.step-content {
  background-color: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--card-shadow);
  width: 100%;
}

.step-title {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: var(--color-text-dark);
}

.step-description {
  color: var(--color-text-light);
  line-height: 1.6;
}

.cta-section {
  position: relative;
  z-index: 3;
  background-color: #ffffff;
  padding: 4rem 0;
  text-align: center;
}

.cta-content h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.cta-content p {
  color: var(--color-text-light);
  margin-bottom: 2rem;
  font-size: 1.2rem;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 3rem;
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-color: var(--color-primary);
  border-radius: 2px;
}

/* 动画效果 */
.animate {
  animation: fadeIn 1s ease-in-out forwards;
}

/* 特定元素的动画 */
.feature-card.animate {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
  transform: translateY(30px);
}

.process-step.animate {
  animation: fadeInRight 0.8s ease-out forwards;
  opacity: 0;
  transform: translateX(-30px);
}

.section-title.animate {
  animation: fadeInDown 0.8s ease-out forwards;
  opacity: 0;
  transform: translateY(-20px);
}

/* 悬停动画 */
.feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  background-color: #f9f9ff;
}

.feature-card:hover .feature-icon {
  animation: pulse 1s infinite;
  color: var(--color-primary-dark, #3050e0);
}

.process-step {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08);
}

.process-step:hover .step-number {
  animation: bounce 0.6s ease-in-out;
  background-color: var(--color-primary-dark, #3050e0);
}

/* 动画关键帧 */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeInUp {
  0% { 
    opacity: 0;
    transform: translateY(30px);
  }
  100% { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  0% { 
    opacity: 0;
    transform: translateX(-30px);
  }
  100% { 
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInDown {
  0% { 
    opacity: 0;
    transform: translateY(-20px);
  }
  100% { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* 滚动视差效果 */
.features-section, .workflow-section {
  position: relative;
  overflow: hidden;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease-out;
}

.features-section {
  background-image: linear-gradient(to bottom, #f7f7f7, #fff);
}

.workflow-section {
  background-image: linear-gradient(to bottom, #f0f4ff, #fff);
}

/* 平滑过渡效果 */
.features-section, .workflow-section {
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
  opacity: 0;
  transform: translateY(30px);
}

.features-section.animate, .workflow-section.animate {
  opacity: 1;
  transform: translateY(0);
}

.feature-card, .process-step {
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              opacity 0.6s ease-out, 
              box-shadow 0.3s ease;
  opacity: 0;
  transform: translateY(30px);
}

.feature-card.animate, .process-step.animate {
  opacity: 1;
  transform: translateY(0);
}

/* 背景渐变过渡 */
.container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 70% 20%, rgba(65, 105, 225, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* 改进的滚动指示器 */
.scroll-indicator {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeInUp 1.5s ease-out forwards;
  z-index: 20;
}

.mouse {
  width: 30px;
  height: 50px;
  border: 2px solid rgba(65, 105, 225, 0.7);
  border-radius: 25px;
  position: relative;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.wheel {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-primary);
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollWheel 1.5s ease-out infinite;
}

.arrow {
  margin-top: 5px;
  animation: bounce 1.5s infinite;
}

.arrow span {
  display: block;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  transform: rotate(45deg);
  margin: -2px;
  animation: scrollArrow 1.5s infinite;
}

.arrow span:nth-child(2) {
  animation-delay: -0.2s;
}

.arrow span:nth-child(3) {
  animation-delay: -0.4s;
}

@keyframes scrollWheel {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
}

@keyframes scrollArrow {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-5px, -5px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(5px, 5px);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* 波浪过渡 */
.wave-transition {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 10;
  transform: translateY(1px); /* 防止波浪之间出现缝隙 */
}

.wave-transition svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px); /* 防止波浪两侧出现缝隙 */
  height: 80px;
  filter: drop-shadow(0 -5px 10px rgba(0, 0, 0, 0.03));
}

/* 平滑过渡效果 */
.features-section, .workflow-section {
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
  opacity: 0;
  transform: translateY(30px);
}

.features-section.animate, .workflow-section.animate {
  opacity: 1;
  transform: translateY(0);
}

.feature-card, .process-step {
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              opacity 0.6s ease-out, 
              box-shadow 0.3s ease;
  opacity: 0;
  transform: translateY(30px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  overflow: hidden;
}

.feature-card.animate, .process-step.animate {
  opacity: 1;
  transform: translateY(0);
}

.feature-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  background-color: #f9f9ff;
}

.process-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* 确保滚动行为平滑 */
html {
  scroll-behavior: smooth;
}

/* 修复部分样式 */
.features-section {
  padding: 6rem 0 8rem;
}

.workflow-section {
  padding: 6rem 0 8rem;
}

.cta-section {
  position: relative;
  z-index: 3;
  background-color: #ffffff;
}
</style>